<template>
	<div>
		<a-modal title="领料记录" :width="1200" :visible="visible" :confirmLoading="confirmLoading" :footer="null"
			:maskClosable="false" @ok="handleSubmit" @cancel="handleCancel">

			<a-spin :spinning="confirmLoading">
				<div style="margin: 10px 0px;">
					<Export text="导出" type="danger" title="领料记录" url="/emsOrder/doMaterialCalculationExport" :obj="{
						orderIds: orderIds
					}" />
				</div>
				<a-form :form="form">
					<a-table ref="table" size="default" :columns="columns" :data-source="filteredData" :pagination="false">
						<!-- 操作 -->
						<span slot="action" slot-scope="text, record">
							<a @click="$refs.deliveryWarehouseRecordModal.show(record)">出库及退库记录</a>
						</span>
					</a-table>
				</a-form>
			</a-spin>
		</a-modal>
		<delivery-warehouse-record-modal ref="deliveryWarehouseRecordModal" />
	</div>

</template>

<script>
import { addAllType, doMaterialCalculation, } from '@/api/modular/main/emsorder/emsOrderManage'
import { STable } from '@/components'
import deliveryWarehouseRecordModal from './deliveryWarehouseRecordModal.vue'

export default {
	components: {
		STable,
		deliveryWarehouseRecordModal
	},
	computed: {
		filteredData() {
			return this.materialCalculationResults
		}
	},
	data() {
		return {
			labelCol: {
				xs: { span: 24 },
				sm: { span: 5 }
			},
			wrapperCol: {
				xs: { span: 24 },
				sm: { span: 15 }
			},
			labelColBlock: {
				xs: { span: 24 },
				sm: { span: 2 }
			},
			wrapperColBlock: {
				xs: { span: 24 },
				sm: { span: 20 }
			},
			visible: false,
			confirmLoading: false,
			form: this.$form.createForm(this),
			columns: [
				{
					title: '序号', width: '80px',
					dataIndex: 'index',
					customRender: (text, record, index) => `${index + 1}`
				},
				{
					title: '物料类型',
					dataIndex: 'materialType',
					customRender: (text, record, index) => {
						let obj = [this.$businessEnum.MATERIAL_TYPE_ENUM.material, this.$businessEnum.MATERIAL_TYPE_ENUM.cable, this.$businessEnum.MATERIAL_TYPE_ENUM.packing].find(item => {
							return item.id == text
						})
						return obj && obj.name ? obj.name : '--'
					}
				},
				{
					title: '物料编码',
					dataIndex: 'materialCode'
				},
				{
					title: '物料名称',
					dataIndex: 'materialName'
				},
				{
					title: '规格',
					dataIndex: 'materialModelNumber'
				},
				{
					title: '数量',
					dataIndex: 'number'
				},
				{
					title: '实际出库数量',
					dataIndex: 'completedNumber'
				},
				{
					title: '总成本小计',
					customRender: (text, record, index) => {
						return record.costTotalPrice
					}
				},
				{
					title: '备注',
					dataIndex: 'remark'
				},
				{
					title: '操作',
					align: 'center',
					width: '150px',
					scopedSlots: { customRender: 'action' }
				}
			],
			orderIds: '',
			sysOrgs: [],
			fileList: [],
			orgTree: [],
			materialCalculationResults: [],
			materialType: this.$businessEnum.MATERIAL_TYPE_ENUM.material.id,
		}
	},
	methods: {
		init(record, materialType) {
			this.visible = true
			this.confirmLoading = true
			this.orderIds = record
			doMaterialCalculation({ orderIds: this.orderIds }).then((res) => {
				this.confirmLoading = false
				this.materialCalculationResults = res.data
			})
		},
		handleSale(record) {
			// console.log(record)
			this.$refs.toPoolForm.add(record)

		},
		handleSubmit() {
			const { form: { validateFields } } = this
			this.confirmLoading = true

			validateFields((errors, values) => {
				let _values = Object.assign({}, values)
				for (let key in _values) {
					let value = _values[key]
					if (value && typeof value === 'object') {
						_values[key] = value.format('YYYY-MM-DD HH:mm:ss')
					}
				}
				if (!errors) {
					addAllType(_values).then((res) => {
						this.confirmLoading = false
						if (res.success) {
							this.$message.success('新增成功')
							this.handleCancel()
							this.$emit('ok', values)
						} else {
							this.$message.info('新增失败：' + res.message)
						}
					}).finally((res) => {
						this.confirmLoading = false
					})
				} else {
					this.confirmLoading = false
				}
			})
		},
		handleCancel() {
			this.form.resetFields()
			this.visible = false
		},
	}
}
</script>
